<template>
  <!--模态窗 多行-->
  <transition
    name="custom-classes-transition"
    enter-active-class="animated fadeInDown"
    leave-active-class="animated fadeOutUp"
  >
    <div class="modal-ctrl-body" v-show="addModalObj.isShow">
      <div class="modal-ctrl-main map-ctrl">

        <div class="modal-title">
          <p>新增场所信息</p>
        </div>

        <div class="modal-ctrl-content clear-false">
          <div class="map-body f-l">
            <pointMap
              v-if="addModalObj.isShow"
              ref="pointMapRef"
              :point="point"
              :actionType="actionType"
              :isPolygonButton="isPolygonButton"
              @pointCoordinate="pointCoordinate"
            ></pointMap>
          </div>

          <div class="map-body f-l" :style="{right: openMapDataContentIsShow ? '0':'-640px'}">

            <div class="modal-row f-l" >
              <div class="modal-form-key f-l indispensable">
                地址：
              </div>
              <input type="text" maxlength="64" placeholder="最长64个字符" v-model="AddModalData.address" class="modal-text f-l">
            </div>

            <div class="modal-row f-l" >
              <div class="modal-form-key f-l indispensable">
                编码：
              </div>
              <input type="text" maxlength="16" placeholder="最长16个字符" v-model="AddModalData.code" class="modal-text f-l">
            </div>

            <div class="modal-row f-l" >
              <div class="modal-form-key f-l indispensable">
                资源名称：
              </div>
              <input type="text" maxlength="16" placeholder="最长16个字符" v-model="AddModalData.name" class="modal-text f-l">
            </div>

            <div class="modal-row f-l" >
              <div class="modal-form-key f-l indispensable">
                所属单位：
              </div>
              <input type="text" v-model="stationName" @click="getStationTree" readonly="readonly" class="modal-text f-l" >
              <input type="hidden" v-model="AddModalData.stationid">
              <div class="sectionTree" v-show="sectionTreeIShow">
                <div id="sectionTree" class="ztree sectionTree-box"></div>
              </div>
            </div>

            <div class="modal-row f-l">
              <div class="modal-form-key f-l">
                资源类型编码：
              </div>
              <select @change="selectResourceType" :value="AddModalData.resourceTypeCode" class="modal-text">
                <option value="hotel">旅馆</option>
                <option value="netbar">网吧</option>
                <option value="重点区域">重点区域</option>
              </select>
            </div>

            <div class="modal-row f-l" >
              <div class="modal-form-key f-l indispensable">
                点位名称：
              </div>
              <input type="text" maxlength="16" placeholder="最长16个字符" v-model="AddModalData.pointName" class="modal-text f-l">
            </div>

            <div class="modal-row f-l" >
              <div class="modal-form-key f-l">
                场所类型：
              </div>
              <input type="text" maxlength="16" placeholder="最长16个字符" v-model="AddModalData.placetype" class="modal-text f-l">
            </div>

         <!--   <div class="modal-row f-l" >
              <div class="modal-form-key f-l">
                大图：
              </div>
              <input type="text" v-model="AddModalData.bimage" class="modal-text f-l">
            </div>

            <div class="modal-row f-l" >
              <div class="modal-form-key f-l">
                小图：
              </div>
              <input type="text" v-model="AddModalData.simage" class="modal-text f-l">
            </div>-->

            <div class="modal-row f-l" >
              <div class="modal-form-key f-l">
                描述：
              </div>
              <input type="text" maxlength="64" placeholder="最长64个字符" v-model="AddModalData.description" class="modal-text f-l">
            </div>

            <div class="modal-row f-l" >
              <div class="modal-form-key f-l">
                扩展属性表：
              </div>
              <input type="text" readonly="readonly" v-model="AddModalData.owner" class="modal-text f-l">
            </div>

            <div class="modal-row f-l">
              <div class="modal-form-key f-l">
                经度：
              </div>
              <input type="text" v-model="AddModalData.longitude" maxlength="12" class="modal-text f-l">
            </div>

            <div class="modal-row f-l">
              <div class="modal-form-key f-l">
                纬度：
              </div>
              <input type="text" v-model="AddModalData.latitude" maxlength="11" class="modal-text f-l">
            </div>

          </div>

          <div class="map-data-show"
               :style="{right: openMapDataContentIsShow ? '600px':'-40px'}"
               @click="openMapDataContent"
               title="录入地图信息"
          >
            <span class="glyphicon"
                  :class="{'glyphicon-chevron-left':!openMapDataContentIsShow,'glyphicon-chevron-right':openMapDataContentIsShow}">
            </span>
            <span class="glyphicon"
                  :class="{'glyphicon-chevron-left':!openMapDataContentIsShow,'glyphicon-chevron-right':openMapDataContentIsShow}">
            </span>
          </div>
        </div>
        <div class="btns text-r">
          <button type="button" class="btn btn-default"  @click="close">取消</button>
          <button type="button" class="btn btn-info" @click="subBtn">确定</button>
        </div>
        <!--{{userDetailsModal.obj}}-->
      </div>
    </div>
  </transition>
</template>

<script>
    import pointMap from "../../map/pointMap/pointMap"
    export default {
        name: "AddSiteModal",
        props:["addModalObj"],
        data(){
          return{
            AddModalData:{
              address:'', //地址
              code:'', //编码
              name:'', //名称
              stationid:'', //部门id
              resourceTypeCode:"hotel",//资源类型编码
              pointName:"",//点位名称
              bimage:"",//大图
              description:"",//描述
              placetype:"",//场所类型
              simage:"",//小图
              owner:"T_RES_PLACE_INFO",//扩展属性表
              latitude:"", //纬度
              longitude:"",//经度
            },
            point:[114.21868761726246, 30.584733852070247],
            actionType:null,
            carTypeList:[],
            stationName:'',
            setting : {
              data: {
                simpleData: {
                  enable: true
                },
              }
            },
            sectionTreeIShow:false,
            isPolygonButton: false,
            openMapDataContentIsShow:false
          }
        },
        components:{
          pointMap
        },
        mounted(){
          let _this = this;
          this.setting.callback = {
            onClick:function(event,treeId,treeNode){ //新增警员部门树选择
              //console.log(treeNode);
              _this.AddModalData.stationid = treeNode.id;
              _this.stationName = treeNode.name;
              _this.sectionTreeIShow = !_this.sectionTreeIShow;
            }
          };
        },
        methods:{
          //提交
          subBtn(){
            //console.log(this.AddModalData);
            if( this.verifyForm.isNull(this.AddModalData.address) ){
              this.s_alert("地址不能为空！");
              return false;
            }
            else if( this.verifyForm.isNull(this.AddModalData.code) ){
              this.s_alert("编码不能为空！");
              return false;
            }
            else if( this.verifyForm.isNull(this.AddModalData.name) ){
              this.s_alert("资源名称不能为空！");
              return false;
            }
            else if( this.verifyForm.isNull(this.AddModalData.stationid) ){
              this.s_alert("所属单位不能为空！");
              return false;
            }
            else if( this.verifyForm.isNull(this.AddModalData.pointName) ){
              this.s_alert("点位名称不能为空！");
              return false;
            }
            else if( this.verifyForm.ifLongitude(this.AddModalData.longitude) ){
              this.s_alert("经度格式不正确！只能为正负180之间！");
              return false;
            }
            else if( this.verifyForm.ifLatitude(this.AddModalData.latitude) ){
              this.s_alert("纬度格式不正确！只能为正负90之间！");
              return false;
            }

            this.$axios.post(this.DotCtrl+"/resource/placeInfoCRUD/addPlaceInfo",this.AddModalData)
              .then((data)=>{
                //console.log(data);
                this.s_alert("新增成功！");
                this.s_logwrite("资源信息管理-场馆管理","新增场馆");
                this.close();
              })
              .catch((err)=>{
                this.s_alert("新增失败！"+err.response.data.errorMsg);
                //console.log(err);
              })
          },
          //选择资源类型编码
          selectResourceType(ele){
            ////console.log(ele.target.value);
            this.AddModalData.resourceTypeCode = ele.target.value;
          },

          //展开部门树
          getStationTree(){
            this.sectionTreeIShow = !this.sectionTreeIShow;
            if( this.sectionTreeIShow ){
              this.getStationTreeAjax()
            }
          },
          //获取地图经纬度
          pointCoordinate(data){
            //console.log(data);
            this.AddModalData.longitude = data[0];
            this.AddModalData.latitude = data[1];
          },
          //加载部门树
          getStationTreeAjax(){
            this.$axios.get(this.HOST+'/station/getOrgaInfo')
              .then((data)=>{
                $.fn.zTree.init($("#sectionTree"), this.setting, data.data.data);
                //console.log(data);
              })
              .catch((err)=>{
                //console.log(err);
              })
          },
          //关闭弹窗
          close(){
            this.$emit("addModalClose");
            this.clearData(); //关闭弹窗清除数据
          },
          //清除数据
          clearData(){
            this.AddModalData={
              address:'', //地址
              code:'', //编码
              name:'', //名称
              stationid:'', //部门id
              resourceTypeCode:"hotel",//资源类型编码
              pointName:"",//点位名称
              bimage:"",//大图
              description:"",//描述
              placetype:"",//场所类型
              simage:"",//小图
              owner:"T_RES_PLACE_INFO",//扩展属性表
              latitude:"", //经度
              longitude:"",//纬度
            };
            this.stationName='';
            this.openMapDataContentIsShow = false;
          },
          //展开地图数据录入界面
          openMapDataContent(){
            this.openMapDataContentIsShow = !this.openMapDataContentIsShow;
          }
        }
    }
</script>

<style scoped>
  .sectionTree{
    position: absolute;
    top: 30px;
    right: 0;
    width: 60%;
    z-index: 2;
    background-color: #fff;
    border:1px solid rgba(51,51,51,0.2);
    box-sizing: border-box;
    padding: 5px;
    max-height: 200px;
    overflow-y: auto;
  }
  .fadeInDown,.fadeOutUp{
    animation-duration: .500s;
  }
</style>
